<template>
  <div class="p-2 text-sm">
    <this-card>
      <template #title> 开通会员 </template>
      <template #subtitle> 专享高速通道，每天赠送次数 </template>
      <div class="grid grid-cols-3 gap-x-2 mb-4">
        <this-option
          v-for="(item, index) in optionsByTime"
          :key="index"
          @click="select1 = index"
          :select="select1 === index"
        >
          <template v-if="index === 2 && select1 === 2" #label
            >最多人买</template
          >
          <template #title>{{ item.vipDuration }}</template>
          <template #subtitle>个月</template>
          <template #content
            >限时<span class="text-red-500">{{ item.discountPriceYuan }}</span
            >元</template
          >
          <template #footer>每天{{ item.sessionNumber }}次</template>
        </this-option>
      </div>
      <van-button @click="payByTime" class="w-full" round type="primary"
        >立即开通会员</van-button
      >
      <p class="text-xs text-gray-400 text-center mt-2">
        提醒：会员属恩拟商品-充值后不支持退款。请谨悄!
      </p>
    </this-card>

    <this-card class="mt-8">
      <template #title> 充值次数 </template>
      <template #subtitle> 充值次数永不过期 </template>
      <div class="grid grid-cols-3 gap-x-2 mb-4">
        <this-option
          v-for="(item, index) in optionsByCount"
          :key="index"
          @click="select2 = index"
          :select="select2 === index"
        >
          <template #title>{{ item.sessionNumber }}</template>
          <template #subtitle>条</template>
          <template #content
            >特价<span class="text-red-500">{{ item.discountPriceYuan }}</span
            >元</template
          >
          <template #footer>原价{{ item.priceYuan }}元</template>
        </this-option>
      </div>
      <van-button @click="payByCount" class="w-full" round type="primary"
        >立即开通会员</van-button
      >
      <p class="text-xs text-gray-400 text-center mt-2">
        提醒：会员属恩拟商品-充值后不支持退款。请谨悄!
      </p>
    </this-card>
  </div>
</template>

<script>
import thisCard from "./card.vue";
import thisOption from "./option.vue";
import api from "../../utils/request";

export default {
  components: { thisCard, thisOption },
  data() {
    return {
      select1: 2,
      select2: 1,
      optionsByCount: [],
      optionsByTime: [],
    };
  },
  created() {
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get("code");
    if (code) {
      api.post("/v1/webpage/login", { code }).then((res) => {
        sessionStorage.setItem("token", res.token);
        api.get("/v1/bill/selling/package").then((res) => {
          this.optionsByCount = res
            .filter((item) => item.type === 2)
            .sort((a, b) => a.sessionNumber - b.sessionNumber);
          this.optionsByTime = res
            .filter((item) => item.type === 1)
            .sort((a, b) => a.vipDuration - b.vipDuration);
        });
      });
    } else {
      api
        .post("/v1/webpage/auth-url", {
          redirectUri: window.location.href,
        })
        .then((res) => {
          window.location.href = res.url;
        });
    }
  },
  methods: {
    payByTime() {
      let item = this.optionsByTime[this.select1];
      this.pay(item.id);
    },
    payByCount() {
      let item = this.optionsByCount[this.select2];
      this.pay(item.id);
    },
    pay(packageId) {
      api.post("/v1/bill/jssdk/order ", { packageId }).then((res) => {
        console.log(res, 222);
      });
    },
  },
};
</script>

<style>
</style>